<section class='content-header'>
  <%= breadcrumb({ breadcrumbTitle: "Virtual Clusters" }) %>
</section>

<section class='content'>
  <div class='box'>
    <div class='box-body'>
      <table id='vc-table' class='table table-bordered table-hover table-condensed' style='vertical-align:middle'>
        <thead>
          <tr>
            <th>Name</th>
            <th>Capacity</th>
            <th>Utilization</th>
            <th>Memory</th>
            <th>CPUs</th>
            <th>GPUs</th>
            <th>Active Jobs</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <% for (let vcName in data) { %>
            <% if (specifiedVc && vcName !== specifiedVc) continue; %>
              <tr>
                <td>
                  <a href="virtual-clusters.html?vcName=<%= vcName %>"><%= vcName %></a>
                </td>
                <td>
                  <%= formatNumber(data[vcName]['capacity'], 2) %> %
                </td>
                <td>
                  <%= formatNumber(data[vcName]['capacity'] === 0 ? 0 : data[vcName]['usedCapacity'] / data[vcName]['capacity'] * 100, 2) %> %
                </td>
                <td>
                  <%= data[vcName]['resourcesUsed']['memory'] %> MB
                </td>
                <td>
                  <%= data[vcName]['resourcesUsed']['vCores'] %>
                </td>
                <td>
                  <%= data[vcName]['resourcesUsed']['GPUs'] %>
                </td>
                <td>
                  <%= data[vcName]['numJobs'] %>
                </td>
                <td>
                  <a href="view.html?vcName=<%= vcName %>">View Jobs</a>
                  &nbsp;&nbsp;|&nbsp;&nbsp;
                  <a href="<%= yarnWebPortalUri %>/cluster/scheduler?openQueues=<%= vcName %>" target="_blank">Go to Yarn Page</a>
                </td>
              </tr>
              <% } %>
        </tbody>
      </table>
    </div>
  </div>
</section>